<template>
  <div v-if="show" class="export-dialog">
    <div class="dialog-content">
      <h3>导出棋谱</h3>
      <div class="export-options">
        <div class="format-select">
          <label>格式:</label>
          <select v-model="format">
            <option value="PGN">PGN</option>
            <option value="FEN">FEN</option>
            <option value="JSON">JSON</option>
          </select>
        </div>
        
        <div class="options">
          <label>
            <input 
              type="checkbox" 
              v-model="includeComments"
            > 包含注释
          </label>
          <label>
            <input 
              type="checkbox" 
              v-model="includeEvaluation"
            > 包含评估
          </label>
        </div>

        <textarea 
          readonly 
          :value="exportedText"
          @click="handleCopy"
        ></textarea>

        <div class="buttons">
          <button @click="handleCopy">复制</button>
          <button @click="handleDownload">下载</button>
          <button @click="$emit('close')">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useChessNotation } from '../composables/useChessNotation'

const props = defineProps<{
  show: boolean
  moves: string[]
  board: (string | null)[][]
}>()

const emit = defineEmits<{
  (e: 'close'): void
}>()

const format = ref<'PGN' | 'FEN' | 'JSON'>('PGN')
const includeComments = ref(false)
const includeEvaluation = ref(false)

const { exportGame } = useChessNotation()

const exportedText = computed(() => {
  return exportGame(props.moves, props.board, {
    format: format.value,
    includeComments: includeComments.value,
    includeEvaluation: includeEvaluation.value
  })
})

const handleCopy = () => {
  navigator.clipboard.writeText(exportedText.value)
}

const handleDownload = () => {
  const blob = new Blob([exportedText.value], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `chess-game.${format.value.toLowerCase()}`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}
</script>

<style scoped>
/* ... 样式代码 ... */
</style> 